<template>
  <view class="my-remark">
	<uni-forms ref="form" @submit="submit" :rules="rules">
		<uni-forms-item label="学校:">
			<picker
				mode="multiSelector" @columnchange="schoolColumnChange"
				:value="multiIndex" :range="multiArray" range-key="name" @change="changeSchool"
			>
				<input :disabled="true" v-model="applyData.school_name" class="schoolInput"  placeholder="点击选择学校" />
			</picker>
		</uni-forms-item>
		<uni-forms-item label="姓名:" name="username">
			<input class="input" type="text" placeholder="请输入您的姓名" v-model="applyData.username"
			@input="binddata('username',$event.detail.value)"/>
		</uni-forms-item>
		<uni-forms-item label="电话号码:" name="telephone">
			<input class="input" type="text" v-model="applyData.telephone"
					placeholder="请输入您的电话号码" @input="binddata('telephone',$event.detail.value)" />
		</uni-forms-item>
		<uni-forms-item label="微信号:" name="wechat">
			<input class="input" type="text" placeholder="请输入您的微信号"  v-model="applyData.wechat"
			@input="binddata('wechat',$event.detail.value)"/>
		</uni-forms-item>
		<uni-forms-item label="店铺名称:" name="shopName">
			<input  class="input" type="text" 
					placeholder="请输入店铺名称" v-model="applyData.shopName"
					@input="binddata('shopName',$event.detail.value)" />
		</uni-forms-item>
		<uni-forms-item label="店铺地址:" name="address">
			<input  class="input" type="text" placeholder="请输入店铺地址" v-model="applyData.address"
					@input="binddata('address',$event.detail.value)" />
		</uni-forms-item>
		<label class="comment-label">店铺描述：</label>
		<textarea v-model="applyData.description"  class="textarea"  
			placeholder="简单介绍一下你的店铺吧~ " />
		<view class="footer">
			<button  @click="submitForm">修改报名信息</button>
			<button  @click="cancleApply">取消报名</button>
		</view>
	</uni-forms>
  </view>
</template>

<script>
import {uniForms, uniFormsItem} from '@dcloudio/uni-ui'
import {getSchoolTree} from '@/api/user.js'
import {deleteStoreEnroll, updateStoreEnroll} from '@/api/shop.js'
import {mapState, mapActions} from 'vuex'
export default {
  name: 'create-remark',
  components: {
    uniForms, uniFormsItem
  },
  data() {
  	return {
		multiIndex: [-1, -1, -1],
		multiArray: [[], [], []],
		applyData: {},
		originData: {},
  	}
  },
  
	onLoad(option) {
		this.setSchoolData().then(data=>{  // 获取学校信息
			this.multiArray = [
				data, data[0].cityVOList, data[0].cityVOList[0].schoolList,
			]
		});
		const eventChannel = this.getOpenerEventChannel()
		let that = this
		eventChannel.on('acceptDataFromOpenerPage', function(item) {
			that.applyData = JSON.parse(JSON.stringify(item))
			that.originData = item
		})
	},
  computed:{
		...mapState(['hasLogin', 'userInfo', 'schoolData']),
  },
  methods: {
	...mapActions(['setSchoolData']),
	cancleApply(){
		uni.showModal({
		    title: '删除报名',
		    content: '删除后该报名信息将不会被保存，确认删除吗？',
		    success: (res) => {
		        if (res.confirm) {
		            console.log('用户点击确定');
					this.deleteApply()
		        }
		    }
		});
	},
	deleteApply(){
		deleteStoreEnroll(this.applyData.id).then(res=>{
			if(res.code === 200){
				uni.showToast({title: '删除成功！'})
				uni.switchTab({
					url: '/pages/mine/index'
				})
			}else{
				uni.showToast({title: '删除失败！', icon: 'none'})
			}
		})
	},
	changeSchool(e){
		this.multiIndex = e.detail.value
		this.applyData.schoolId = this.multiArray[2][this.multiIndex[2]].schoolId
		this.applyData.school_name = this.multiArray[2][this.multiIndex[2]].name
	},
	schoolColumnChange(e){
		const {column, value} = e.detail
		this.multiIndex[column] = value
		switch(column){
			case 0:  // 选择的是第一列
				this.multiArray[1] = this.multiArray[0][value].cityVOList
				this.multiArray[2] = this.multiArray[1][0].schoolList
				this.multiIndex[1] = 0
				this.multiIndex[2] = 0
				break;
			case 1:  // 选择的是第二列
				this.multiArray[2] = this.multiArray[1][value].schoolList
				this.multiIndex[2] = 0
				break;
			default: break;
		}
		this.$forceUpdate()
	},
	// 提交表单
	submit(e) {
		const {errors, value} = e.detail
		const {username, address, wechat, description,shopName, schoolId, telephone, id} = this.applyData
		if(!username){
			uni.showToast({title:'请输入您的姓名~', icon: 'none'}); return;
		}
		if(!wechat){
			uni.showToast({title:'请输入您的微信账号~', icon: 'none'}); return;
		}
		if(!telephone){
			uni.showToast({title:'请输入您的电话号码~', icon: 'none'}); return;
		}
		if(!description){
			uni.showToast({title:'请输入店铺描述~', icon: 'none'}); return;
		}
		if(!shopName){
			uni.showToast({title:'请输入店铺名称~', icon: 'none'}); return;
		}
		if(!address){
			uni.showToast({title:'请输入店铺地址~', icon: 'none'}); return;
		}
		if(!schoolId){
			uni.showToast({title:'请选择店铺就近的学校~', icon: 'none'}); return;
		}
		let pattern = /^((1[0-9]{10})|(([0-9]{3,4}-)?[0-9]{7,8}))$/
		if(!pattern.test(telephone)){
			uni.showToast({title:'请检查您的电话号码', icon: 'none'}); return;
		}
		let formData = {id, username, address, wechat, description,shopName, schoolId, telephone}
		console.log(formData)
		this.updateShopApply(this.applyData.id, formData)
	},
	updateShopApply(id, formData){  // 添加店铺报名
		updateStoreEnroll(id,formData).then(res=>{
			if(res.code === 200){
				Object.assign(this.originData, this.applyData)
				uni.showToast({title: '修改成功！'})
				uni.navigateBack({
					animationType: 'pop-out',
					animationDuration: 200
				})
			}
		}).catch(err=>{uni.showToast({title:'我们的网络出现了一点错误，请稍候再试~', icon: 'none'})})
	},
	submitForm(form) {
		// 手动提交表单
		this.$refs.form.submit()
	},
  }
}
</script>

<style lang='scss'>

/* 头条、百度小程序组件内不能引入字体 */
	/* #ifdef MP-BAIDU */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	/* #endif */
 page {
   background-color: #f5f5f5;
   padding: 10rpx;
 }

  .footer{
  	 display: flex;
  	 justify-content: space-around;
  	 button {
  	    margin-top: 10rpx;
		background-color: $theme-color;
		color: #ffffff;
		&::after{
		  border: none;
		}
  	   /* background-color: #fff;
  	    color: $theme-color;
  	    &::after{
  	      border: $theme-color 1px solid;
  	    } */
  	  }
  }
  .example-body {
		display: flex;
  	flex-direction: row;
  	justify-content: flex-start;
  	flex-wrap: wrap;
  	padding: 0 20rpx;
  }
  
  .comment-label{
	width: 210rpx;
	word-wrap: break-word;
	word-break: break-all;
	text-indent: 20rpx;
  }
  
  .tag-view {
  	/* #ifndef APP-PLUS-NVUE */
  	display: flex;
  	/* #endif */
  	flex-direction: column;
  	margin: 10rpx 5rpx;
  	justify-content: center;
  }

  /* 表单 */
  .input {
  	height: 60rpx;
  	padding: 15rpx 25rpx;
  	line-height: 50rpx;
  	font-size: 28rpx;
  	background: #FFF;
  	flex: 1;
  }
  .schoolInput{
		width: 550rpx;
		height: 60rpx;
		padding: 15rpx 25rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		background: #FFF;
		flex: 1;
  }
  .textarea {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding: 15rpx 25rpx;
		font-size: 28rpx;
  	background: #FFF;
		height: 150rpx;
		width: 93%;
  }
</style>
